<template>
  <div>
    <Row>
      <Col span="22">
        <SearchForm @get="handleSearch"></SearchForm>
      </Col>
      <Col span="2">
        <div class="btn-wrapper">
          <Button v-per="'create'" class="editable-add-btn" type="primary" @click="handleAdd"
            ><template #icon><PlusOutlined /></template>新建规则</Button
          >
        </div>
      </Col>
    </Row>
    <br />
    <Table
      bordered
      :data-source="dataSource"
      :columns="ruleColumns"
      :pagination="false"
      :scroll="scroll"
      :loading="loading"
      class="main-table"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action'">
          <span v-per="'detail'">
            <a @click="handleDetail(record)">查看详情</a>
          </span>
          <Divider type="vertical" />
          <span v-per="'update'"> <a @click="handleEdit(record)">编辑</a> </span>

          <Divider type="vertical" />
          <span v-per="'active'"> <a @click="handleEnable(record)">停启用</a> </span>
          <Divider type="vertical" />
          <span v-per="'delete'">
            <Popconfirm
              v-if="dataSource.length"
              title="是否确认删除？"
              @confirm="onDelete(record.id)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a>删除</a>
            </Popconfirm>
          </span>
        </template>
      </template>
    </Table>
    <br />
    <Pagination
      v-model:current="current"
      v-model:pageSize="pageSize"
      :show-total="(total) => `共 ${total} 条`"
      :total="total"
      show-size-changer
    />

    <CreateEditView ref="drawerSwitch" @getNewRecord="getDataSource"></CreateEditView>
  </div>
</template>
<script lang="ts" setup>
import { Table, Button, Popconfirm, Divider, Pagination, message, Row, Col } from 'ant-design-vue';
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import SearchForm from '/@/views/upgrade-center/grayscale/ruleManagement/component/searchForm.vue';
import CreateEditView from '/@/views/upgrade-center/grayscale/ruleManagement/component/createEditView.vue';
import {
  deleteRule,
  enableRule,
  getRuleDetail,
  getRuleTable,
} from '/@/api/upgrade-center/grayscale/ruleManagement/ruleManagement';
import { ruleParams } from '/@/api/upgrade-center/grayscale/ruleManagement/model/ruleManagementModel';
import { ruleColumns } from '/@/views/upgrade-center/grayscale/ruleManagement/data';
const dataSource = ref();
const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
// 获取表格
let params: ruleParams = {
  name: '',
  routeLinkKeys: [],
};
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
const getDataSource = async () => {
  try {
    let res = await getRuleTable(params);
    dataSource.value = res.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
    total.value = res.length;
  } catch (error) {
    message.error(error.message);
  } finally {
    loading.value = false;
  }
};
getDataSource();

watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  getDataSource();
});
watch(current, () => {
  getDataSource();
});
// 新建链路
const drawerSwitch = ref();
const handleAdd = () => {
  drawerSwitch.value.useCreate();
};
// 查看详情
const handleDetail = (record) => {
  drawerSwitch.value.useDetail(record);
};
// 编辑
const handleEdit = (record) => {
  drawerSwitch.value.useEdit(record);
};
// 启停用
const handleEnable = async (record) => {
  let res = await getRuleDetail(record.id);
  let result = await enableRule(res);
  getDataSource();
  if (result) {
    message.success((res.status ? '停用' : '启用') + '成功');
  }
};
// 删除
const onDelete = async (key: string) => {
  let res = await deleteRule(key);
  if (res) {
    message.success(res);
  }
  getDataSource();
};
// 处理查询重置
const handleSearch = (searchParams) => {
  params = {
    name: searchParams.name,
    routeLinkKeys: searchParams.routeLinkKeys,
  };
  getDataSource();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
